<template>
  <div class="md_bd">
    <div class="md_row">
      <div class="md_heand">
        <div class="hedimg">
          <img :src="songlist.coverImgUrl" width="200px" height="200px" />
        </div>
        <div class="md_tag">
          <div class="ic">
            <span>歌单</span>
          </div>
          <div class="md_til">
            <h2>{{songlist.name}}</h2>
          </div>
        </div>
        <div class="md_use">
          <div class="md_use_img">
            <img :src="songlist.creator.avatarUrl" width="35px" height="35px" />
          </div>
          <span class="md_name">
            <a href="#">{{songlist.creator.nickname}}</a>
          </span>
          <span class="md_crtime">2020-04-15 创建</span>
        </div>
        <div class="md_fun">
          <button class="bt">
            <i class="el-icon-video-play" id="md_play1"></i>
            <a href="#">播放</a>
          </button>
          <button class="el-icon-plus"></button>
          <button class="el-icon-folder-add">
            <span>({{songlist.subscribedCount}})</span>
          </button>
          <button class="el-icon-share">
            <span>({{songlist.shareCount}})</span>
          </button>
          <button class="el-icon-s-comment">
            <span>({{songlist.commentCount}})</span>
          </button>
        </div>
        <div class="md_tags">
          <span>标签：</span>
          <a href="#" v-for="(item ,index) in songlist.tags" :key="index">{{item}}</a>
        </div>
        <pre class="md_text">
          <span>介绍：</span>
          {{songlist.description}}
        </pre>
      </div>
      <div class="md_musictab">
        <h3>
          <span>歌曲列表</span>
        </h3>
        <div class="md_num">
          <span>{{songlist.trackCount}}首歌</span>
        </div>
        <div class="md_songnum">
          <span>
            播放：
            <span style="color:#C20C0C">{{songlist.playCount}}</span>次
          </span>
        </div>
        <hr />
        <table class="md_songtable" id="tb1">
          <thead>
            <th class="md_w1"></th>
            <th class="md_w2">歌曲标题</th>
            <th class="md_w3">时长</th>
            <th class="md_w4">歌手</th>
            <th class="md_w5">专辑</th>
          </thead>
          <tbody>
            <tr v-for="(item2 ,index) in musiclist" :key="index">
              <td>
                <span>{{index+1}}</span>
                <a href="#">
                  <i class="el-icon-video-play" id="md_play2" @click="playmusic(item2.songs[0].id)"></i>
                </a>
              </td>
              <td>
                <a :href="'#/discover/musicInfo/id='+item2.songs[0].id">{{item2.songs[0].name}}</a>
              </td>
              <td>{{changtime(item2.songs[0].dt)}}</td>
              <td>
                <a
                  :href="'#/discover/songerInfo/id='+item2.songs[0].ar[0].id"
                >{{item2.songs[0].ar[0].name}}</a>
              </td>
              <td>
                <a :href="'#/discover/albuminfo/id='+item2.songs[0].al.id">{{item2.songs[0].al.name}}</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["id"],
  data() {
    return {
      songlist: {},
      musiclist: []
    };
  },
  methods: {
    playmusic: function(id) {
      this.$store.commit("chang", id);
    },
    init: function() {
      axios
        .get("https://api.imjad.cn/cloudmusic/?type=playlist&id=" + this.id)
        .then(input => {
          this.songlist = input.data.playlist;
          this.songlist.trackIds.forEach(element => {
            axios
              .get(
                "https://api.imjad.cn/cloudmusic/?type=detail&id=" + element.id
              )
              .then(mus => {
                this.musiclist.push(mus.data);
              })
              .catch(err2 => {
                console.log(err2);
              });
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    it: function() {
      console.log(this.musiclist[0].songs[0].al.name);
      console.log(this.musiclist[0].songs[0].dt);
      console.log(this.musiclist[0].songs[0].name);
      console.log(this.musiclist[0].songs[0].ar[0].name);
    },
    changtime: function(time) {
      //this.$store.commit('changeMusicTime',time)
      return this.$store.getters.changeMusicTime(time);
    }
  },
  mounted() {
    this.init();
    this.changeMusicTime();
  }
};
</script>